<template>
  <div class="user-form">
    <h2>{{ isEditing ? '修改用户信息' : '新用户注册' }}</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label>用户名：</label>
        <input
          v-model="formData.userName"
          type="text"
          required
          placeholder="输入用户名："
          :disabled="submitting"
        />
      </div>

      <div class="form-group">
        <label>邮箱：</label>
        <input
          v-model="formData.email"
          type="email"
          required
          placeholder="输入邮箱地址："
          :disabled="submitting"
        />
      </div>

      <div class="form-group">
        <label>电话号码：</label>
        <input
          v-model="formData.phone"
          type="tel"
          placeholder="输入电话号码："
          :disabled="submitting"
        />
      </div>

      <div class="form-group">
        <label>密码：</label>
        <input
          v-model="formData.password"
          type="password"
          placeholder="输入密码："
          :disabled="submitting"
        />
      </div>

      <!-- 新增性别选择 -->
      <div class="form-group">
        <label>性别：</label>
        <select v-model="formData.gender" required :disabled="submitting">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>

      <!-- 新增生日选择 -->
      <div class="form-group">
        <label>生日：</label>
        <input v-model="formData.birthday" type="date" required :disabled="submitting" />
      </div>

      <!-- 新增备注字段 -->
      <div class="form-group">
        <label>备注：</label>
        <textarea
          v-model="formData.note"
          placeholder="填写备注（可选）"
          :disabled="submitting"
        ></textarea>
      </div>

      <div v-if="error" class="error-message">
        {{ error }}
      </div>

      <div class="form-actions">
        <button type="submit" :disabled="submitting">
          {{ submitting ? (isEditing ? 'Updating...' : 'Adding...') : isEditing ? '更新' : '增加' }}
        </button>
        <router-link to="/" class="cancel-btn">Cancel</router-link>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { UserService } from '@/services/userService'

const route = useRoute()
const router = useRouter()

const isEditing = ref(false)
const error = ref(null)
const submitting = ref(false)
const formData = ref({
  userName: '',
  email: '',
  phone: '',
  password: '',
  gender: '男', // 默认选择男性
  birthday: '', // 默认生日为空
  note: '', // 新增备注字段
})

const submitForm = async () => {
  error.value = null
  submitting.value = true

  try {
    if (isEditing.value) {
      await UserService.updateUser(route.params.id, formData.value)
    } else {
      await UserService.createUser(formData.value)
    }
    router.push('/')
  } catch (err) {
    error.value =
      err.response?.data?.message ||
      (isEditing.value
        ? 'Failed to update user. Please try again.'
        : 'Failed to create user. Please check your inputs.')
  } finally {
    submitting.value = false
  }
}

onMounted(async () => {
  if (route.params.id) {
    isEditing.value = true
    try {
      const user = await UserService.getUserById(route.params.id)
      formData.value = {
        userName: user.userName,
        email: user.email,
        phone: user.phone,
        password: user.password,
        gender: user.gender, // 加载性别
        birthday: user.birthday, // 加载生日
        note: user.note || '', // 加载备注
      }
    } catch (err) {
      error.value = 'Failed to load user data'
    }
  }
})
</script>

<style scoped>
.user-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-group textarea {
  height: 100px; /* 设置备注框的高度 */
}

.error-message {
  color: red;
  margin-bottom: 15px;
}

.form-actions {
  display: flex;
  gap: 10px;
}

button {
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
}

button:disabled {
  background-color: #cccccc;
}

.cancel-btn {
  padding: 10px 15px;
  background-color: #f44336;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}
</style>
